<template>
    <van-row type="flex" justify="space-around">
        <van-col span="12">
            <van-row 
                type="flex" justify="space-around" 
                :style="fmtBorder(img.border)" 
                v-for="(img, i) in tempEngine.imgs"
                :key="i"
                >
                <van-col>
                    <upload :img="img" :boxClass="smallBox"></upload>
                </van-col>
            </van-row>
        </van-col>
        <van-col span="12">
            <upload :style="fmtBorder(tempEngine.img.border)" :img="tempEngine.img" :boxClass="boxClass"></upload>
        </van-col>
    </van-row>
</template>
<script>
import upload from '@/components/upload'
import { mapGetters } from 'vuex'
export default {
    components: { upload },
    data() {
        return {
            boxClass: {
                div: {'padding': '70px'},
                icon: {'font-size': '30px', 'color': '#C0C4CC'}
            },
            smallBox: {
                div: {'padding': '31px'},
                icon: {'font-size': '20px', 'color': '#C0C4CC'}
            }
        }
    },
    computed: {
        ...mapGetters(['backGround'])
    },
    props: {
        tempEngine: {
            type: Object,
            default(){}
        }
    },
    methods: {
        fmtBorder(val){
            val['border-left'] = this.backGround
            val['border-right'] = this.backGround
            return val
        }
    }
}
</script>

